<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>html2canva上传国籍护照</title>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <style>
        *{margin: 0;padding: 0}
        input{outline: none;border: 0}
        @font-face {
            font-family: 'YourWebFontName';
            src:  url('STXINGKA.TTF') format('truetype');/*IE*/
        }
        #app{
            padding-top: 50px;
            width: 80%;
            display: flex;
            justify-content: space-between;
            margin: 0 auto;
        }
        #view{
            position: relative;
        }

        #view div{
            position: absolute;
            font-family: YourWebFontName;
            transform: skew(4.2deg);
            -webkit-transform: skew(4.2deg);
        }
        .name{
            font-size: 11px;
            top: 77px;
            right: 160px;

        }
        .sex{
            font-size: 14px;
            top: 71px;
            right: 69px;
        }
        .phone{
            font-size: 14px;
            top: 118px;
            left: 434px;
        }

        .formbox{
            width: 400px;
        }

        .formbox .inputbox{
            width: 80%;
            height: 45px;
            line-height: 45px;
            padding: 4px 0 4px 25px;
            font-size: 26px;
            margin-bottom: 34px;
            border-radius: 30px;
            border: 2px solid #333;
        }

        #view{
            width: 534px;
            height: 286px;
            background-image: url("bg.jpg");
            background-size: 100% 100%;
        }
        #js-head{
            top: 153px;
            left: 287px;
            width: 94px;
            height: 96px;
        }
        #js-head img{
            width: 94px;
            height: 96px;
        }
    </style>
</head>
<script type="text/javascript">
    function takeScreenshot() {
        $(".btn").show();
        html2canvas(document.getElementById('view'), {
            onrendered: function(canvas) {
                document.body.appendChild(canvas);
            },
            //width: 300,
            //height: 300
        });
    }
</script>
<body id="body">
<div id="app">
    <div class="formbox">
        <input type="text" class="inputbox" v-model="name" placeholder="请输入姓名">
        <input type="text" class="inputbox" v-model="sex" placeholder="请输入性别">
        <input type="text" class="inputbox" v-model="phone" placeholder="请输入手机号">
        <input type="file" v-on:change="imguploder" value="上传头像">
        <input type="button" value="生成" onclick="takeScreenshot()" style="padding: 5px 10px;margin: 20px">
        <button class="btn" style="display: none" v-on:click="Download">保存</button>
    </div>
    <div id="view">
        <div class="name" >{{name}}</div>
        <div class="sex" >{{sex}}</div>
        <div class="phone" >{{phone}}</div>
        <div class="imghead" id="js-head">
            <img src="" alt="">
        </div>
    </div>
</div>
</body>
<script>
var  app= new Vue({
    el: '#app',
    data: {
        name:'赵丽颖',
        sex:"女",
        phone:"9999999"
    },
    methods: {
        imguploder:function(e){
            // 一寸照片上传
            if (e.target.files.length > 0) {
                var file = e.target.files[0];
                this.getPhotoSize(file)
            }  
        },
        getPhotoSize:function (obj) {
            // 大小限制
            fileSize = obj.size;
            fileSize = Math.round(fileSize / 1024 * 100) / 100; //单位为KB
            if (fileSize >= 1000) {
                alert("照片最大尺寸为1000KB，请重新上传!");
                return;
            } else {
                this.setImg(obj);
            }
        },
        setImg:function (file) {
            var r = new FileReader();
            r.readAsDataURL(file);
            r.onload = function(e){
                $('#js-head img').attr('src', e.target.result)
            }
        },
        Download:function () {
                //cavas 保存图片到本地  js 实现
                //------------------------------------------------------------------------
                //1.确定图片的类型  获取到的图片格式 data:image/Png;base64,......
                var type ='jpg';//你想要什么图片格式 就选什么吧
                var d=document.querySelector('#body canvas');
                var imgdata=d.toDataURL(type,1.0);
                //2.0 将mime-type改为image/octet-stream,强制让浏览器下载
                var fixtype=function(type){
                    type=type.toLocaleLowerCase().replace(/jpg/i,'jpeg');
                    var r=type.match(/png|jpeg|bmp|gif/)[0];
                    return 'image/'+r;
                };
                imgdata=imgdata.replace(fixtype(type),'image/octet-stream');
                //3.0 将图片保存到本地
                var savaFile=function(data,filename)
                {

                    var save_link=document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                    save_link.href=data;
                    save_link.download=filename;
                    var event=document.createEvent('MouseEvents');
                    event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);
                    save_link.dispatchEvent(event);
                };
                var filename=''+new Date().toLocaleTimeString()+'.'+type;
                //注意咯 由于图片下载的比较少 就直接用当前几号做的图片名字
                savaFile(imgdata,filename);
        }
    }
});
</script>
</html>